<template>
	<view class="container">
		<view class="header">
			<image class="header-img" src="/static/img/bal_bg.png" mode=""></image>
			<view class="header-wrapper u-f-column">
				<view class="header-top">
					<view>账户余额</view>
					<text>{{user.credit2}}</text>
				</view>
				<view class="header-bottom u-f-jsb" style="display: flex; justify-content: space-around;">
					<navigator url="../user/withdrawal" class="section u-f-ajc">
						<image src="/static/img/bal_icon02.png" mode=""></image>
						<text>提现</text>
					</navigator>
					<view class="line"></view>
					<view class="section u-f-ajc" @click="jump('/pages/user/operation?type=1')">
						<image src="/static/img/bal_icon01.png" mode=""></image>
						<text>转赠</text>
					</view>

				</view>
				<view class="" style="display: flex;align-items: center;margin-top: 20upx;justify-content: center;" @click="withdraw()" v-if="user.ismaster == 1">
					<image style="width: 48rpx;height: 48rpx;" src="/static/img/bal_icon01.png" mode=""></image>
					<text style="font-size: 32rpx;color: $uni-text-color;">弘豆提取</text>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="list">
			<view v-for="(item, index) in list" :key="index">
				<navigator :url="item.url" class="list-item u-f-jsb">
					<image :src="item.icon" mode=""></image>
					<text class="u-f1">{{ item.title }}</text>
					<uni-icons type="arrowright" color="#656565" size="20"></uni-icons>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	// import service from '@/store/service.js';
	import uicons from '@/components/uni-icons/uni-icons.vue';
	export default {
		components: {
			uicons
		},
		data() {
			return {
				user: '',
				list: [{
						title: '消费明细',
						icon: '/static/img/bal_icon03.png',
						url: '../user/consumerDetails'
					},
					{
						title: '提现明细',
						icon: '/static/img/bal_icon04.png',
						url: '../user/withdrawDetails'
					},
					// {
					// 	title: '佣金明细',
					// 	icon: '/static/img/bal_icon05.png',
					// 	url: '../commonality/log'
					// },
					// {
					// 	title: '弘豆明细',
					// 	icon: '/static/me/tuandui@2x.png',
					// 	url: '../balance/group'
					// },
					// {
					// 	title: '提取明细',
					// 	icon: '/static/img/bal_icon05.png',
					// 	url: '../balance/extract'
					// },
					// {
					// 	title: '转让明细',
					// 	icon: '/static/img/bal_icon04.png',
					// 	url: '../balance/transfer'
					// },
				]
			};
		},
		onShow: function() {
			this.getUserInfo()
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			withdraw() {
				var self = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否将子账号余额提取到主账号',
					success: function(res) {
						if (res.confirm) {
							self.$Request.get(self.$api.user.withdrawal, {}).then(function(res) {
								// var list = res.data;
								// self.user = list;
								self.$api.msg(res.info);
								if (res.code == 1) {
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										});
									}, 500);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			getUserInfo() {
				var self = this;
				self.$Request.post(self.$api.user.info, {}).then(function(res) {
					var list = res.data;
					self.user = list;
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #f3f3f3;
		.header {
			position: relative;
			width: 750rpx;
			height: 420rpx;

			.header-img {
				width: 100%;
				height: 100%;
			}

			.header-wrapper {
				box-sizing: border-box;
				position: absolute;
				bottom: 0rpx;
				left: 20rpx;
				width: 710rpx;
				height: 380rpx;
				padding: 70rpx 0 30rpx;
				background-color: $uni-bg-color;
				border-radius: 20rpx;

				.header-top {
					text-align: center;

					view {
						font-size: 32rpx;
						color: $uni-text-color;
					}

					text {
						font-size: 56rpx;
						color: $uni-text-color;
						font-weight: bold;
					}
				}

				.header-bottom {
					width: 100%;

					.section {
						width: 50%;
						text-align: center;
						image {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							font-size: 32rpx;
							color: $uni-text-color;
						}
					}

					.line {
						width: 1px;
						height: 40rpx;
						background-color: #e8e3e3;
					}
				}
			}
		}

		.list {
			padding: 40rpx 20rpx;

			.list-item {
				height: 100rpx;
				padding: 0 20rpx;
				font-weight: bold;
				color: $uni-text-color;
				background-color: $uni-bg-color;
				margin-bottom: 20rpx;
				border-radius: 20rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 26rpx;
				}
			}
		}
	}
</style>
